<template>
    <div class="rating" v-if="hotel_detail">
        <div class="title">{{ratings.total}}条用户评评论</div>
        <div class="rating_">
            <div class="frneral">
                <div class="text">总评数: {{hotel_detail.visits_month}}</div>
                <div class="text">好评数: {{hotel_detail.very_good_remarks}}</div>
                <div class="text">差评数: {{hotel_detail.very_bad_remarks}}</div>
            </div>
            <div class="information">
                    <div class="grade">
                        <el-rate v-model="value" disabled show-score text-color="#ff9900" score-template="{value}分"></el-rate>
                        <div class="recommend" v-if="value>=3.5">推荐</div>
                        <div class="recommend" v-else>一般</div>
                    </div>
                    <div class="serve">
                        <div class="serve_one">
                            <svg data-v-52d03705="" viewBox="0 0 74 74">
                                <path data-v-52d03705="" d="M 35 2, A 35,35 0 1 1 2.260214856622234,39.13599670762205" fill="none" stroke="#f90" stroke-width="2"></path>
                            </svg>
                            <span>环境{{(hotel_detail.scores.environment).toFixed(1)}}</span>
                        </div>
                        <div class="serve_one">
                            <svg data-v-52d03705="" viewBox="0 0 74 74">
                                <path data-v-52d03705="" d="M 35 2, A 35,35 0 1 1 2.260214856622234,39.13599670762205" fill="none" stroke="#f90" stroke-width="2"></path>
                            </svg>
                            <span>产品{{(hotel_detail.scores.product).toFixed(1)}}</span>
                        </div>
                        <div class="serve_one">
                            <svg data-v-52d03705="" viewBox="0 0 74 74">
                                <path data-v-52d03705="" d="M 35 2, A 35,35 0 1 1 2.260214856622234,39.13599670762205" fill="none" stroke="#f90" stroke-width="2"></path>
                            </svg>
                            <span>服务{{(hotel_detail.scores.service).toFixed(1)}}</span>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["hotel_detail"],
    data() {
        return {
            value: this.hotel_detail.stars,
            ratings: {},
        };
    },
    async mounted () {
        const res = await this.$axios({
            url: 'http://157.122.54.189:9095/hotels/comments',
            params: {
                hotel: this.$route.params.id 
            }
        })
        this.ratings = res.data
    }
};
</script>

<style lang="less" scoped>
.rating {
  .title {
    font-size: 20px;
    font-weight: 700;
  }
  .rating_ {
    display: flex;
    .frneral {
      width: 180px;
      padding: 20px 0;
      .text {
        color: #666697;
        padding: 5px;
      }
    }
    .information {
      width: 660px;
      display: flex;
      align-items: center;
      .grade {
          margin-right: 10px;
          width: 200px;
          position: relative;
          .recommend {
              width: 80px;
              height: 80px;
              line-height: 80px;
              text-align: center;
              font-size: 24px;
              border: #f7ba2a 1px solid;
              border-radius: 50%;
              position: absolute;
              color: #f7ba2a;
              top: -30px;
              left: 18px;
              transform: rotate(-30deg);
              opacity: .6;
          }
      }
      .serve {
          display: flex;
          justify-content: space-evenly;
          margin-left: 20px;
          width: 540px;
          .serve_one {
              width: 80px;
              height: 80px;
              color: #f7ba2a;
              position: relative;
              span {
                  position: absolute;
                  top: 26px;
                  left: 16px;
              }
          }
      }
    }
  }
}
</style>